<template>
  <div>
    <div class="w-full h-10 text-lg m-1 border-l-4 border-l-yellow-400 flex justify-around items-center text-white">
      <div @click="status = 0" :class="status === 0 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
        等待审核
      </div>
      <div @click="status = 1" :class="status === 1 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
        报备通过
      </div>
      <div @click="status = 2" :class="status === 2 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
        拒绝通过
      </div>
    </div>

    <button class="rounded py-2 w-full border my-2 bg-yellow-500 block text-center text-white" @click="showAdd = true">
      + 报备信息</button>

    <van-list class="border bg-white rounded" :loading="loading" :finished="finished" :finished-text="'没有更多了'"
      @load="onLoad">
      <div class="m-2 p-2 border rounded bg-gray-50/70 text-sm" :key="index" v-for="(item, index) in datas">
        <div class="flex justify-between items-center border-b border-gray-700 mb-2 p-1">
          <div>审核状态：<span
              :style="item.reviewStatus == 0 ? 'color: #ffc107' : item.reviewStatus == 1 ? 'color: #28a745' : 'color: #dc3545'">{{
                item.reviewStatus == 0 ? '等待审核' : item.reviewStatus == 1 ? '审核成功' : '审核失败' }}</span></div>
          <div class="space-x-2">
            <button v-if="item.reviewStatus == 0" @click="() => { showEdit = true; _item = item }"
              class="border text-white bg-green-400 rounded px-2">修改</button>
            <button @click="delReport(item.id)" class="border text-white bg-gray-400 rounded px-2">删除</button>
          </div>
        </div>

        <div>
          <div>报备类型：{{ item.title }}</div>
          <div>报备姓名：{{ item.name }} 报备账号 ：{{ item.account }}</div>
          <div>报备银行名称：{{ item.bank }}</div>
          <div>报备申请时间：{{ dayjs(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
          <div>处理审核时间：{{ item.reviewTime ? dayjs(item.reviewTime * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}</div>
        </div>
      </div>
    </van-list>

    <add-modal :show="showAdd" @close="showAdd = false" @confirm="() => { showAdd = false; onLoad() }" />
    <edit-modal :show="showEdit" :item="_item" @close="showEdit = false"
      @confirm="() => { showEdit = false; onLoad() }" />
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { GetReportIndexApi, DelReportApi } from '@/apis/payment'
import AddModal from '../modal/addPaymentModal.vue';
import EditModal from '../modal/editPaymentModal.vue';

import dayjs from 'dayjs'
import { showConfirmDialog, showSuccessToast } from 'vant';
const status = ref(0)
const finished = ref(false)
const loading = ref(false)
const page = ref(1)
const datas = ref([])

const showAdd = ref(false)
const showEdit = ref(false)
const _item = ref({})

async function onLoad() {
  loading.value = true
  const { list } = await GetReportIndexApi({
    page: page.value,
    limit: 10,
    reviewStatus: status.value
  })
  if (list.length > 0) {
    page.value++
    loading.value = false
    finished.value = false
    datas.value.push(...list)
  } else {
    loading.value = false
    finished.value = true
  }
}

function delReport(id: string) {
  showConfirmDialog({
    title: '提示',
    message: '确定删除该报备信息吗？',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    onConfirm: () => {
      DelReportApi({ id }).then(() => {
        showSuccessToast({
          message: '删除成功',
          duration: 1000
        })
        datas.value = []
        page.value = 1
        finished.value = false
        onLoad()
      })
    }
  })
}

watch(status, () => {
  datas.value = []
  page.value = 1
  finished.value = false
  onLoad()
})
</script>
